<template>
  <div class="department-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <PageTools>
        <template #left>
          当前有50条数据
        </template>
        <template #right>
          <div>
            <!-- <el-button type="primary" sizi="mini" @click="$router.push('/import')">导入按钮</el-button>
            <el-button type="success" sizi="mini" @click="exportExcel">导出按钮</el-button> -->
            <el-button v-permission="'export_excel'" type="success" size="mini" @click="exportExcel">导出excel</el-button>
            <el-button v-permission="'import_excel'" type="info" size="mini" @click="$router.push('/import')">导入excel</el-button>
            <el-button type="info" sizi="mini">信息按钮</el-button>
            <el-button type="danger" sizi="mini" @click="addDataJiao">新增员工</el-button>
          </div>
        </template>
      </PageTools>

      <!-- 表格 -->
      <!-- {prop: 'timeOfEntry', order: 'ascending'}"排序,后面就是有小到大,  sortable放在你要排序的那个tab上面-->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :default-sort="{prop: 'timeOfEntry', order: 'ascending'}"
      >
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          prop="username"
          label="姓名"
        />
        <el-table-column
          prop="workNumber"
          label="工号"
        />
        <el-table-column
          property="formOfEmployment"
          label="聘用形式"
          width="180"
        >
          <template slot-scope="scope">
            <div @click="fn(scope)">{{ transfromHireType(scope.row.formOfEmployment) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="staffPhoto"
          label="照片"
          width="180"
        >
          <template slot-scope="scope">
            <!-- <img :src="scope.row.staffPhoto" alt="" width="100"> -->
            <ImgPreview :src="scope.row.staffPhoto" />
          </template>
        </el-table-column>

        <el-table-column
          prop="departmentName"
          label="部门"
        /> <el-table-column
          prop="timeOfEntry"
          sortable
          label="入职时间"
        />
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="$router.push(`/employees/detail?id=${scope.row.id}`)"
            >查看</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="fenpeiRole(scope.row.id)"
            >分配角色</el-button>
            <el-button
              size="mini"

              type="danger"
              @click="delBtnRole(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination

        :current-page.sync="pageInfo.page"
        :page-size="pageInfo.size"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        />
      </el-pagination>
    </div>
    <el-dialog
      v-if="dialogVisible"
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <DialogAdd @close="dialogVisible=false" @addgetsuccess="addsuccess" />
    </el-dialog>
    <!-- 分配角色弹框 -->
    <el-dialog

      title="角色分配"
      :visible.sync="RouledialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <AssignRole v-if="RouledialogVisible" :current-id="currentId" @close="RouledialogVisible=false" />
    </el-dialog></div>
</template>
<script>
// import PageTools from '@/components/pageTools'
// export default {
//   components: {
//     PageTools
//   }
// }
import { getUserListRequest } from '@/api/emPloyees'
import globaCstant from '@/constant/employees'
import DialogAdd from '@/views/employees/dialogAdd.vue'
import { delEmployee } from '@/api/emPloyees'
import { transformEnToZhCN } from '@/utils/index'
import AssignRole from '@/views/employees/components/AssignRole.vue'
function text(id) {
  const item = globaCstant.hireType.find(item => item.id === id)
  if (item) {
    return item.value
  } else {
    return '临时工'
  }
}
console.log(text(1))
export default {
  components: {
    DialogAdd,
    AssignRole
  },
  data() {
    return {
      tableData: [],
      pageInfo: {
        page: 1,
        size: 10
      },
      total: 0,
      // 提示框初始化为关闭
      dialogVisible: false,
      // 角色管理
      RouledialogVisible: false,
      currentId: ''
    }
  },
  // 页面入口
  created() {
    this.getUserList()
  },
  methods: {
    fn(aa) {
      console.log(aa)
    },
    // 获取全部信息
    async getUserList() {
      try {
        const res = await getUserListRequest(this.pageInfo)
        console.log(res)
        if (res.success) {
          this.total = res.data.total
          this.tableData = res.data.rows
        }
      } catch (error) {
        this.$message.error('获取失败')
      }
    },
    handleSizeChange() {},
    handleCurrentChange(value) {
      this.pageInfo.page = value
      this.getUserList()
    },
    transfromHireType(id) {
      const item = globaCstant.hireType.find(item => item.id === id)
      if (item) {
        return item.value
      } else {
        return '临时工'
      }
    },
    // 新增员工按钮
    addDataJiao() {
      this.dialogVisible = true
    },
    // 子组件传过来添加员工请求
    addsuccess() {
      this.dialogVisible = false
      this.getUserList()
    },
    // 删除数据请求
    async delEmployeedata(id) {
      try {
        const res = await delEmployee(id)
        // console.log('delEmployee: ', res)
        if (res.success) {
          this.getUserList()
        } else {
          this.$message.error(res.message)
        }
      } catch (err) {
        console.log('delEmployee: ', err)
      }
    },
    // 删除按钮
    delBtnRole(id) {
      console.log(id, 66666666666666)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delEmployeedata(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分配角色弹出按钮
    fenpeiRole(id) {
      this.RouledialogVisible = true
      this.currentId = id
    },
    // 导出
    exportExcel() {
      // 模拟
    //   import('@/vendor/Export2Excel').then(excel => {
    //     // const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
    //     // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
    //     // const list = this.list
    //     // 断点可以看到data是一个二维数组，因为这个是excel文件需要的数据格式
    //     // const data = this.formatJson(filterVal, list)
    //     excel.export_json_to_excel({
    //       // 表头
    //       header: ['姓名', '年龄', '组织'],
    //       data: [
    //         ['张宇', '20', '人类'],
    //         ['张宇1', '120', '人类'],
    //         ['张宇2', '220', '人类'],
    //         ['张宇3', '320', '人类']

      //       ],
      //       filename: '导出文件名称',
      //       autoWidth: true,
      //       bookType: 'xlsx'
      //     })
      //     this.downloadLoading = false
      //   })
      // }
      // 导出实验
      import('@/vendor/Export2Excel').then(excel => {
        // const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // const list = this.list
        // 断点可以看到data是一个二维数组，因为这个是excel文件需要的数据格式
        const { header, data } = transformEnToZhCN(this.tableData)
        excel.export_json_to_excel({
          // 表头
          header,
          data,
          filename: '导出文件名称',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    }
  }
}

</script>
<style lang="scss" scoped>

</style>
